<template>

  <el-row > 
    <el-col :span="14" class="col-container">
  </el-col>
<el-col :span="8" class="col-container">
        <!-- 添加角色按钮 -->
    <el-button type="primary" @click="openAddDialog"><el-icon><Plus /></el-icon>添加角色</el-button>
</el-col>
  <el-col :span="2">
  </el-col>
 </el-row>


  <!-- 角色列表 -->
  <el-table :data="roles" style="margin-top: 20px" border>
    <el-table-column prop="name" label="角色名称" width="200" />
    <el-table-column prop="remark" label="备注" />
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button plain size="small" type="primary" @click="openEditDialog(scope.row.id)"><el-icon><Edit /></el-icon>编辑</el-button>
        <el-button plain size="small" type="danger" @click="deleteRole(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加/编辑角色对话框 -->
  <el-dialog v-model="dialogVisible" :title="isEditing ? '编辑角色' : '添加角色'" width="40%">
    <el-form :model="form" label-width="100px" :rules="rules" ref="roleForm">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from '@/utils/request.js'

// 角色列表数据
const roles = reactive([])

// 表单数据
const form = reactive({
id: null,
name: '',
remark: ''
})

// 对话框状态
const dialogVisible = ref(false)
const isEditing = ref(false)

// 校验规则
const rules = reactive({
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
})

// 模拟加载角色列表数据
onMounted(() => {
// roles.value = [
//   { id: 1, name: '管理员', remark: '系统管理员角色' },
//   { id: 2, name: '用户', remark: '普通用户角色' }
// ]
getAllInfos() 
})

// 打开添加角色对话框
const openAddDialog = () => {
isEditing.value = false
Object.assign(form, { id: null, name: '', remark: '' })
dialogVisible.value = true
}

// 打开编辑角色对话框
const openEditDialog = (id) => {
  isEditing.value = true
  //使用axios实现角色信息的编辑
  axios(
            {
              url: '/rolem/getInfoById.do',
              method: 'post',
              params: {
                id:id
              },
              
            }).then((res) => {

              form.id = res.id
              form.name = res.name
              form.remark = res.remark
              
              dialogVisible.value = true
            }).catch((err) => {
              ElMessage.error('角色信息查询失败')
            })

}

//使用axios实现角色信息的查询


// 提交表单
const submitForm = () => {
if (!form.name || !form.remark) {
  ElMessage.error('请填写完整信息')
  return
}

if (isEditing.value) {
  // 编辑角色
  axios(
            {
              url: '/rolem/updateInfo.do',
              method: 'post',
              params: {
                id: form.id,
                name: form.name,
                remark: form.remark
              },
            }).then((res) => {
              if(res.result=='success'){
                  ElMessage.success('角色编辑成功')
                  dialogVisible.value = false
                  getAllInfos()
              }
            }).catch((error) => {
               ElMessage.error('网络请求失败，请检查网络是否畅通!');
            })

} else {
  // 使用axios实现添加角色
  axios(
            {
              url: '/rolem/saveInfo.do',
              method: 'post',
              params: {
                name: form.name,
                remark: form.remark,
              },
            }).then((res) => {
              if(res.result=='success'){
                  ElMessage.success('保存成功!');
                  dialogVisible.value = false
                  getAllInfos()
              }else {
                ElMessage.error('保存失败，请检查数据是否正确!');
              }
            }).catch((error) => {
               ElMessage.error('网络请求失败，请检查网络是否畅通!');
            })
}
}

// 删除角色
const deleteRole = (id) => {
ElMessageBox.confirm('确定要删除该角色吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  //使用axios删除角色
  axios(
            {
              url: '/rolem/deleteInfo.do',
              method: 'post',
              params: {
                id: id
              },
            }).then((res) => {
              if(res.result=='success'){
                 ElMessage.success('删除成功!');
                 getAllInfos()
              }else {
                ElMessage.error('删除失败，请检查数据是否正确!');
              }
            }).catch(()=>{
              ElMessage.error('删除失败，请检查数据是否正确!');
            })

}
)
}
//获取所有角色信息
const getAllInfos=()=>{
axios(
          {
            url: '/rolem/getAllInfos.do',
            method: 'post',
            params: {
            },
          }).then((res) => {
            // alert(JSON.stringify(res))
             roles.splice(0, roles.length, ...res)
          }).catch((error) => {
               ElMessage.error('网络请求失败，请检查网络是否畅通!');
              //  ElMessage.warning('请检查服务器是否开启!');
              //  ElMessage.success('请检查数据库是否连接!');
          })


}
</script>

<style scoped>
.role-management {
padding: 20px;
}
.el-row {
  margin-top: 0rem;
  height: 60px;
  padding: 0cm;
  margin-bottom: 0
}
.col-container {
display: flex;
align-items: center;  /* 垂直居中 */
justify-content: flex-end; /* 水平靠右 */
height: 60px;
padding: 0px; /* 添加内边距 */
}
</style>